<!--
背景属性
    背景颜色：background-color:[指定颜色]
    背景图片：background-image:url(图片地址)
    
    平铺也就相当于将图片添加到背景上，但是会右许多个一样的照片
    背景平铺：background-repeat:[平铺方式]
        repeat:平铺
        no-repeat:不平铺
        repeat-x:水平平铺
        repeat-y:垂直平铺

    x y表示的是图片左上角，移动的移动的坐标
    背景位置：background-position: x y;
    参数的三种风格：
        1. 方位名词：(top,left,right,bottom)
        2. 精确单位：坐标或者百分比（以左上角为原点）
        3. 混合单位：同时包含方位名词和精确单位

    背景尺寸：background-size: length|percentage|cover|contain;
        1. 可以填具体的数值: 如 :ppx 60px 表示宽度为 40px,高度为 60px
        2. 也可以填百分比: 按照父元素的尺寸设置.
        3. cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
        4. 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: aqua;
        }

        div{
            background-image: url(https://img95.699pic.com/photo/50158/8657.jpg_wh860.jpg);
            width: 800px;
            height: 500px;
            background-repeat: no-repeat;
            /* background-position: top; */
            background-position: 100px center;

            /* background-size: 800px 500px; */
            background-size: cover;
        }

    </style>
</head>
<body>
    <div>
        这是我在学习相关背景的属性
    </div>
</body>
</html>